import React, { useEffect } from "react";
import { Modal, Form, Input, Select, Row, Col } from "antd";

const { Option } = Select;

// 仓库数据类型定义
export interface StoreData {
  key?: string;
  storeCode: string;
  storeName: string;
  capacity: string;
  address: string;
  department: string;
  responsiblePerson: string;
  locationCount: string;
  status: string;
  operator: string;
  operateTime: string;
}

interface StoreModalProps {
  visible: boolean;
  isEdit: boolean;
  initialValues?: StoreData;
  onCancel: () => void;
  onSubmit: (values: StoreData) => void;
}

const StoreModal: React.FC<StoreModalProps> = ({
  visible,
  isEdit,
  initialValues = {
    storeCode: "",
    storeName: "",
    capacity: "",
    address: "",
    department: "",
    responsiblePerson: "",
    locationCount: "",
    status: "启用",
    operator: "",
    operateTime: ""
  },
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    // 只有当visible为true且有initialValues时才设置表单值
    if (visible && initialValues) {
      // 延迟设置表单值，确保Modal已经完全渲染
      const timer = setTimeout(() => {
        form.setFieldsValue(initialValues);
      }, 0);
      
      return () => clearTimeout(timer);
    }
    // 当Modal关闭时重置表单
    // if (!visible) {
    //   form.resetFields();
    // }
  }, [visible, initialValues, form]);

  const handleSubmit = () => {
    form
      .validateFields()
      .then((values) => {
        onSubmit(values as StoreData);
      })
      .catch((info) => {
        console.log("表单验证失败:", info);
      });
  };

  return (
    <Modal
      title={isEdit ? "编辑仓库" : "新增仓库"}
      open={visible}
      onOk={handleSubmit}
      onCancel={onCancel}
      width={700}
      // 确保Modal在关闭时重置表单
      afterClose={() => form.resetFields()}
    >
      {/* 只有当visible为true时才渲染Form，确保form实例正确连接 */}
      {visible && (
        <Form form={form} layout="vertical">
        <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="仓库编号"
                name="storeCode"
                rules={[{ required: true, message: "请输入仓库编号" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="仓库名称"
                name="storeName"
                rules={[{ required: true, message: "请输入仓库名称" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="仓库容量/m³"
                name="capacity"
                rules={[{ required: true, message: "请输入仓库容量" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="库位数量"
                name="locationCount"
                rules={[{ required: true, message: "请输入库位数量" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="库管部门"
                name="department"
                rules={[{ required: true, message: "请输入库管部门" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="仓库主管"
                name="responsiblePerson"
                rules={[{ required: true, message: "请输入仓库主管" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="状态" name="status">
                <Select>
                  <Option value="启用">启用</Option>
                  <Option value="停用">停用</Option>
                  <Option value="已锁定">已锁定</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="操作人" name="operator">
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="仓库地址" name="address">
                <Input.TextArea rows={3} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="操作时间" name="operateTime">
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      )}
      </Modal>
    );
};

export default StoreModal;